window.onload = () => {
  let c1 = document.getElementById('c1');
  let cxt = c1.getContext('2d');

  window.onmousedown = (ev) => {
    cxt.beginPath();
    cxt.strokeStyle = 'red';
    cxt.lineWidth = 50;
    cxt.lineTo(ev.clientX - c1.offsetLeft, ev.clientY - c1.offsetTop);
    window.onmousemove = (ev) => {
      cxt.lineTo(ev.clientX - c1.offsetLeft, ev.clientY - c1.offsetTop);
      cxt.stroke();
    }
    window.onmouseup = (ev) => {
      window.onmousemove = null;
      window.onmouseup = null;
    }
  }
}
